<template>
  <div class="page-view">
    <router-link
      :to="{name: 'classDetail', query: {classId: item.ClassId, title: item.ClassName}}"
      tag="div"
      class="class-item"
    >
      <div
        class="class-item-img-box"
      >
        <img
          v-lazy="item.ClassImg"
          class="class-cover"
        >
      </div>
      <div class="class-item-info-box">
        <div class="class-name">
          {{ item.ClassName }}
        </div>
        <div class="class-fit-people">
          适合人群：{{ item.FitPeople || '无' }}
        </div>
        <div class="class-people">
          {{ item.ClassPeople }}人报名
        </div>
      </div>
    </router-link>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: {
    item: {
      default: () => ({}),
      type: Object,
    },
  },
})
</script>

<style lang="scss" scoped>
  @import "~scss/class/class.scss";
  .page-view {
    padding: 0 24px;
  }
</style>
